import React, { useState, useEffect, useCallback, useMemo, memo } from "react"; // react hooks

// const Context = React.createContext(0);
// Context.Consumer
// Context.Provider

import withAuthorization from "../hoc";

function FuncComp() {
  const [count, setCount] = useState(0);

  // useEffect(() => {
  //   // 此时相当于 componentDidMount 和 componentDidUpdate
  //   console.log("useEffect");
  // });

  // useEffect(() => {
  //   // 此时相当于 componentDidMount
  //   console.log("useEffect");
  // }, []);

  useEffect(() => {
    // 此时相当于 componentDidMount
    console.log("useEffect");
    return () => {
      // 相当于 componentWillUnmount
    };
  }, []);

  // 用于缓存函数
  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [setCount, count]);

  // 用来缓存计算结果：相当于只读的计算属性
  const oddOrEven = useMemo(() => {
    return count % 2 === 0 ? "偶数" : "奇数";
  }, [count]);

  return (
    <div>
      <h1>FuncComp</h1>
      <p>
        {count} - {oddOrEven}
      </p>
      <button onClick={handleClick}>+</button>
    </div>
  );
}

// export default withAuthorization(FuncComp);
export default memo(FuncComp, (prevProps, nextProps) => {
  return true;
});
